<template>
  <div class="kejie">
    <div class="top">
      <h3>{{detail.title}}</h3>
      <p>
        {{detail.count}}
        <span>人学习</span>
      </p>
    </div>
    <div class="ge"></div>
    <div class="lecturer">
      <div class="lecturer-top">
        <p>讲师介绍</p>
      </div>
      <div class="lecturer-bottom">
        <div class="img">
          <img :src="url + detail.avatar" />
        </div>
        <div class="hu">{{detail.name}}</div>
        <div class="wen" v-html="detail.content"></div>
      </div>
    </div>
    <div class="ge"></div>
    <div class="lecturer">
      <div class="lecturer-top">
        <p>课程介绍</p>
      </div>
      <div class="lecturer-bottom">
        <div class="wen" v-html="detail.desc"></div>
      </div>
      <div class="bottom">
        <div>
          <div @click="$router.push({name: 'Home'})">
            <img src="../assets/img/首页1.png" alt />
            <p>首页</p>
          </div>
          <!-- <div>
            <img src="../assets/img/分享.png" alt />
            <p>分享</p>
          </div>-->
        </div>
        <van-button
          v-if="!detail.is_buy"
          class="btn"
          type="info"
          @click="toNextpage8"
        >立即购买(￥{{detail.price}})</van-button>
        <van-button v-else class="btn btn2" type="info">已购买</van-button>
      </div>
    </div>
  </div>
</template>
<script>
import Home from "../views/Home.vue";
export default {
  name: "kejie",
  data() {
    return {
      url: process.env.VUE_APP_BASEURL
    };
  },
  props: {
    id: {
      type: String
    },
    detail: {
      type: Object
    }
  },
  async mounted() {},
  methods: {
    toNextpage8() {
      this.$router.push({ path: `/lgou/${this.id}` });
    },
    toNextpage7() {
      this.$router.push({ name: "kejie" });
    }
  }
};
</script>
<style scoped>
* {
  margin: 0;
  padding: 0;
}
.top {
  height: 91.5px;
}
.top h3 {
  width: 208px;
  font-size: 15px;
  color: #333333;
  font-weight: 500;
  padding: 18.5px 0 0 15px;
}
.top p {
  font-size: 12px;
  color: #3f44eb;
  font-weight: 400;
  padding: 8.5px 0 0 14.5px;
}
.top span {
  color: #606165;
}
.ge {
  height: 10.5px;
  background: #f5f7fc;
}
.lecturer-top {
  height: 42px;
  border-bottom: 1px solid #d2d2d2;
}
.lecturer-top p {
  padding-left: 15px;
  line-height: 42px;
  font-size: 15px;
  color: #333333;
  font-weight: bold;
}
.lecturer-bottom {
  padding: 14px;
  overflow: hidden;
  position: relative;
  box-sizing: border-box;
}
.lecturer-bottom .img {
  width: 80px;
  height: 82px;
  float: left;
  margin: 0 14px 0 0;
}
.hu {
  font-size: 14px;
  color: #333333;
  font-weight: bold;
}
.wen {
  font-size: 12px;
  color: #333333;
  font-weight: bold;
  line-height: 18px;
}
.lecturer-bottom span {
  font-size: 10px;
  font-weight: bold;
  position: absolute;
  bottom: 2px;
  right: 14.5px;
  color: #3550ff;
}
.van-goods-action-button--last {
  border-radius: 0;
}
.van-goods-action-icon {
  color: #3550ff;
}
.van-goods-action-button {
  background: #3f44eb;
}
.van-button--default {
  color: #f5f7fc;
}
.bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
  height: 50px;
  background: #fff;
}
.bottom .btn {
  flex: 1;
  height: 100%;
  border-radius: 0;
  font-size: 16px;
}
.bottom .btn2 {
  background: #e8ecf0;
  border: #e8ecf0;
  color: #000;
}
.bottom > div {
  display: flex;
  justify-content: space-around;
  flex: 1;
}
.bottom > div > div {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}
.bottom img {
  width: 20px !important;
  height: 20px;
}
</style>